<template>
  <div class="app-main">
    <div class="main-header">
      <el-page-header @back="goBack" content="备忘录详情" />
    </div>
    <div class="main-contain" v-if="data !== ''">
      <div class="contain-top">
        <h2>{{ data.name }}</h2>
        <p><span class="el-icon-time">发表于：{{ data.ctime }}</span> | <span class="el-icon-refresh-left">更新于：{{ data.mtime }}</span></p>
        <div class="importance">
          <span>重要性：</span>
          <el-rate disabled v-model="data.importance" score-template="{data.importance}"></el-rate>
        </div>
        <template v-if="curTag">
          标签：<el-tag v-for="(item, index) in data.tag.split(',')" size="mini" :key="index">{{ item }}</el-tag>
        </template>
        <template v-else>
          标签：<el-tag size="mini">{{ data.tag }}</el-tag>
        </template>
      </div>
      <dmavon-editor :content.sync="data.content" :isEdit="false" edit="preview" />
    </div>
  </div>
</template>

<script>
import dmavonEditor from '@/components/mavonEditor'
export default {
  name: 'editMemery',
  components: {
    dmavonEditor
  },
  data () {
    return {
      data: '',
      curTag: ''
    }
  },
  created() {
    this.detali()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    detali () { // 根据id获取详情
      this.$API({
        name: 'DetailMemery',
        paths: [this.$route.params.id],
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200) {
          this.data = res.data.data
          this.data.importance = parseInt(this.data.importance)
          if (this.data.tag.indexOf(',') !== -1) {
            this.curTag = true
          } else {
            this.curTag = false
          }
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  .main-header {
    height: 31px;
    width: 100%;
    border-bottom: 1px solid #DCDFE6;
    flex-shrink: 0;
  }
  .main-contain {
    padding-top: 10px;
    overflow-y: auto;
    width: 100%;
    flex: 1 1 auto;
    .contain-top {
      margin-bottom: 10px;
      position: relative;
      padding: 10px;
      width: 100%;
      height: 200px;
      overflow: hidden;
      flex-shrink: 0;
      color: #fff;
      background-color: rgba(0,0,0,0.5);
      img {
        width: 100%;
      }
      h2 {
        color: #fff;
      }
      &:before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        background-image: url('../../../assets/bgimage.png');
        background-repeat: no-repeat;
        background-size: cover;
        content: '';
      }
      .importance {
        display: flex;
        margin-bottom: 10px;
      }
    }
    .editor {
      flex: 1 1 auto;
    }
  }
}
</style>